<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文本</title>
<style type="text/css">
canvas {
	border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){
	var canvas=document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var txt="Hello World!";
	// 填充方式绘制文本
	context.fillStyle="#f90";
	context.font="bold 30px impact";
	// 根据已经设置的文本样式度量文本
	var tm=context.measureText(txt);
	context.fillText(txt,10,50);
	context.fillText(tm.width,tm.width+15,50);
	// 描边方式绘制文本
	context.strokeStyle="#f90";
	context.font="bold italic 36px impact";
	// 根据已经设置的文本样式度量文本
	tm=context.measureText(txt);
	context.strokeText(txt,10,100);
	context.strokeText(tm.width,tm.width+15,100);
}
window.addEventListener("load",Draw,true);
</script> 
</head>
<body style="overflow:hidden">
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能！</canvas>
</body>
</html>
